<script setup>
import { ref } from 'vue'
import { getTourRouterListAPI } from '@/services/home'
import { useI18n } from 'vue-i18n' // 使用vue-i18n的useI18n方法
import { onLoad } from '@dcloudio/uni-app'
import { toUpperCaseFunc } from '@/utils/utils'
const { locale, t } = useI18n()
const barshow = ref(false)
const tabTop = ref(0)
const scrollInto = ref(0)

const list = ref([])
const parmas = ref({
  page: 1,
  pageSize: 10,
  cityName: '',
})
const total = ref(0)
const showMore = ref(false)
const triggered = ref(false)
const getData = async (cityName) => {
  parmas.value.cityName = cityName
  uni.showLoading()
  const res = await getTourRouterListAPI(parmas.value)
  if (res.data.list && res.data.list.length) {
    const listResult = res.data.list.filter((item) => {
      item.labelBox = item.label ? item.label.split('|') : ''
      item.imgList = item.url ? item.url.split('|') : []
      return item
    })
    if (parmas.value.page == 1) {
      list.value = listResult
    } else {
      list.value.concat(listResult)
    }
  }
  triggered.value = false
  total.value = res.total
  uni.hideLoading()

  console.log(res.data, list.value)
}
// 页面加载
onLoad(() => {
  getData()
  setTimeout(async () => {
    let rect = await GetRect('#scrollTop')
    tabTop.value = rect.top
  })
})
//获取节点信息
const GetRect = (selector) => {
  return new Promise((resolve, reject) => {
    let view = uni.createSelectorQuery().in(this)
    view
      .select(selector)
      .boundingClientRect((rect) => {
        resolve(rect)
      })
      .exec()
  })
}
// 获取scrollView 标签数据
const scrollTapData = ref([])
scrollTapData.value = [
  {
    id: 'ALL',
    name: 'ALL',
  },
]
const cityName = ref('')
let selectTap = ref('ALL')
const iconClick = () => {
  getData(cityName.value)
  console.log(6666)
}

const switchTap = (e, data) => {
  console.log(e, data)
  if (data.value == 'ALL') {
    parmas.value.page = 1
    getData()
  }
}

const openMap = (data) => {
  // uni.openLocation({
  //   latitude: latitude,
  //   longitude: longitude,
  //   success: function() {
  //     console.log('success');
  //   }
  // });
}

const jumpDetail = (item) => {
  uni.navigateTo({
    url: `/pages/goods/goods?id=${item.id}`,
  })
}
//scroll滚动
const tabScoll = (e) => {
  let scrollTop = e.detail.scrollTop
  barshow.value = scrollTop >= tabTop.value ? true : false
}

//滚动到底部
const onScrolltolower = () => {
  if (total.value > parmas.value.page * parmas.value.pageSize) {
    parmas.value.page++
    getData()
  } else {
    showMore.value = true
  }
}
const onPulling = (e) => {
  console.log('onpulling', e)
}
const onRefresh = (e) => {
  triggered.value = true
  parmas.value.page = 1
  getData()
}
const onRestore = () => {
  triggered.value = 'restore' // 需要重置
  console.log('onRestore')
}
const onAbort = () => {
  console.log('onAbort')
}
</script>

<template>
  <scroll-view
    class="viewport"
    @scroll="tabScoll"
    :scroll-top="scrollInto"
    :show-scrollbar="false"
    scroll-y
    refresher-enabled="true"
    :refresher-triggered="triggered"
    :refresher-threshold="100"
    refresher-background="lightgreen"
    @refresherpulling="onPulling"
    @refresherrefresh="onRefresh"
    @refresherrestore="onRestore"
    @refresherabort="onAbort"
    @scrolltolower="onScrolltolower"
  >
    <view class="head">
      <image class="logo-icon" src="/static/images/logo@2x.png" mode="aspectFill"></image>
      <image class="ding-pic" src="/static/images/ding@2x.png" mode="aspectFill"></image>
      <view class="search-box" :class="barshow ? 'scroll-tab-fixed-search' : ''">
        <view class="search">
          <input
            placeholder-class="plc"
            v-model="cityName"
            placeholder="Attraction/Address"
            type="text"
            class="seach-cont"
          />
          <icon type="search" @click="iconClick" size="26" color="#000" />
        </view>
      </view>
    </view>
    <view class="content">
      <view class="scrollTap" :class="barshow ? 'scroll-tab-fixed' : ''">
        <view class="title">{{ t('home.title') }}</view>
        <scroll-view id="scrollTop" class="scroll-view_H" scroll-x v-if="scrollTapData.length">
          <view
            v-for="item in scrollTapData"
            :key="item.id"
            class="scroll-view-item_H"
            :class="selectTap == item.id ? 'active' : ''"
            @click="switchTap($event, item)"
            >{{ item.name }}</view
          >
        </scroll-view>
      </view>
      <scroll-view show-scrollbar="false" class="list" v-if="list.length">
        <template v-for="item in list" :key="item.id">
          <view class="list-item" @click="jumpDetail(item)">
            <view class="pos-re-box">
              <image class="img" :src="item.imgList[0]" mode="aspectFill"></image>
              <view class="pos-box">
                <view class="pos-label" v-if="item.travelTime">{{ item.travelTime }} days</view>
                <view
                  class="pos-address-box"
                  @click="openMap(item)"
                  v-if="item.provinceNameEN || item.cityNameEN"
                >
                  <image
                    src="/static/images/didian@2x.png"
                    mode="aspectFill"
                    class="pos-location-icon"
                  ></image>
                  <view class=""
                    >{{ item.cityNameEN
                    }}{{ item.provinceNameEN ? ',' + item.provinceNameEN : '' }}</view
                  >
                </view>
              </view>
            </view>
            <view class="desc">{{ item.title }}</view>
            <view class="city-label-box">
              <view
                class="city-label-boxitem"
                v-for="(cityLabel, index) in item.labelBox"
                :key="index"
              >
                {{ cityLabel }}
              </view>
              <view class="price" v-if="item.minPrice">฿{{ item.minPrice }}</view>
            </view>
          </view>
        </template>
      </scroll-view>
      <uni-load-more status="noMore" v-if="showMore" />
    </view>
  </scroll-view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.viewport {
  background: #f9f9f9;

  .head {
    width: 100%;
    height: 756rpx;
    position: relative;

    .logo-icon {
      width: 170rpx;
      height: 44rpx;
      z-index: 2;
      margin: 80rpx 34rpx 0;
    }

    .ding-pic {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
    }

    .search-box {
      width: 100%;

      &.scroll-tab-fixed-search {
        width: 100%;
        height: 260rpx;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;

        .search {
          position: relative;
          top: auto;
          left: auto;
          bottom: auto;
          margin: auto;
          padding: 22rpx 22rpx 22rpx 34rpx;
        }
      }
    }

    .search {
      width: 90.4%;
      height: 104rpx;
      background: #ffffff;
      box-shadow: 0rpx 9rpx 47rpx 0rpx rgba(0, 0, 0, 0.18);
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      z-index: 2;
      font-size: 28rpx;
      position: absolute;
      bottom: 103rpx;
      left: 4.8%;
      padding: 22rpx 22rpx 22rpx 34rpx;

      .plc {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.2);
      }

      .seach-cont {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 60rpx;
        flex: auto;
      }
    }
  }

  .content {
    margin-top: -40rpx;
    z-index: 3;
    position: relative;

    .scroll-tab-fixed {
      position: fixed;
      top: 238rpx;
      left: 0;
      z-index: 3;
      background-color: #fff;
      width: 100%;
      padding-top: 20rpx;
      margin-top: 0;
    }

    .title {
      font-family: HarmonyOS_Sans_SC_Bold;
      font-size: 36rpx;
      font-weight: 700;
      color: #000000;
      line-height: 50rpx;
      padding: 0 36rpx;
      margin-bottom: 30rpx;
    }

    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
      padding: 0 36rpx 36rpx;
      height: auto;
      position: relative;

      .scroll-view-item_H {
        display: inline-block;
        border: 1rpx solid rgba(0, 0, 0, 0.2);
        margin-left: 24rpx;
        border-radius: 27rpx;
        font-family: HarmonyOS_Sans_SC_Medium;
        font-size: 24rpx;
        color: #666666;
        line-height: 34rpx;
        text-align: center;
        padding: 10rpx 28rpx 9rpx;

        &:first-child {
          margin-left: 0;
        }

        &.active {
          background: linear-gradient(270deg, #5b5ef0 0%, #9e67fa 100%);
          color: #fff;
        }
      }

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .list {
      width: 90.4%;
      margin: 0 auto;
      height: 100%;
    }

    .list-item {
      background: #ffffff;
      box-shadow: 0rpx 7rpx 18rpx 0rpx rgba(0, 0, 0, 0.03);
      border-radius: 0 0 12rpx 12rpx;
      margin-bottom: 44rpx;

      .pos-re-box {
        position: relative;

        .pos-box {
          width: 100%;
          position: absolute;
          bottom: 26rpx;
          left: 0;
          padding: 0 26rpx;
          display: flex;
          align-items: center;

          .pos-label {
            background: rgba(0, 0, 0, 0.35);
            border-radius: 10rpx;
            font-family: PingFangSC, PingFang SC;
            border: 2rpx solid #ffffff;
            padding: 6rpx 22rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
            line-height: 33rpx;
          }

          .pos-address-box {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 27rpx;
            color: #ffffff;
            line-height: 38rpx;

            .pos-location-icon {
              width: 33rpx;
              height: 33rpx;
              margin-right: 4rpx;
            }
          }
        }

        .img {
          width: 100%;
          height: 630rpx;
          border-radius: 12rpx 12rpx 0 0;
        }
      }

      .desc {
        padding: 26rpx 26rpx 16rpx;
        font-family: HarmonyOS_Sans_SC_Bold;
        font-weight: 600;
        font-size: 34rpx;
        color: #000000;
        line-height: 48rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .city-label-box {
        display: flex;
        padding: 0 26rpx;

        &item {
          margin-left: 16rpx;
          background: #f9f9f9;
          border-radius: 25rpx;
          border: 1rpx solid rgba(151, 151, 151, 0.19);
          padding: 8rpx 20rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 24rpx;
          color: #000000;
          line-height: 33rpx;
          margin-bottom: 26rpx;
          max-width: 220rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          &:first-child {
            margin-left: 0;
          }
        }

        .price {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          font-weight: 600;
          font-size: 28rpx;
          color: #fe5a00;
          line-height: 40rpx;
        }
      }
    }
  }
}
</style>
